export const Pie2 = () => {
  return `
 
  <template>
  <div
    class="content"
    :style="{
      height: height,
      width: width,
    }"
  >
    <div id="huikuan-echarts"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import "echarts";
const props = defineProps({
  width: {
    //列数据
    type: String,
    default: "930px",
  },
  height: {
    type: String,
    default: "492px",
  },
});
onMounted(() => {
  getEcharts();
});

const getEcharts = () => {
 //展示数据
const optionData = [];
//扇形图颜色数据
const colorList = [
   { color1: '#E2698D', color2: '#A94E6D' },
    { color1: '#DE7110', color2: '#FECD70' },
    { color1: '#D09F08', color2: '#F7CB45' },
      { color1: '#238483', color2: '#55C27C' },
   { color1: '#45EAFF', color2: '#40AFAF' },
      { color1: '#12B3F8', color2: '#7DE8FF' },
     { color1: '#0176D3', color2: '#13B7FF' },
];
//请求的数据
const resultData = [
   {
      name: '罗汉松',
      value: 95,
      percent: '8.05'
   },
   {
      name: '四季桂',
      value: 120,
      percent: '10.17'
   },
   {
      name: '马齿笕',
      value: 98,
      percent: '8.31'
   },
   {
      name: '青江藤',
      value: 90,
      percent: '7.63'
   },
   {
      name: '麻竹',
      value: 100,
      percent: '8.48'
   },
   {
      name: '鸭舌草',
      value: 97,
      percent: '8.22'
   },
   {
      name: '金鱼藻',
      value: 100,
      percent: '8.47'
   },
 
];
let sum = 0;
resultData.forEach(item => {
   sum += item.value;
})
resultData.forEach(item => {
   optionData.push({ value: item.value, name: item.name });
   optionData.push({ name: '', value: sum / 100, itemStyle: { color: 'transparent' } });
})

  let myChart = echarts.init(document.getElementById("huikuan-echarts"));
  let option = {
   //你的代码
   legend: [
      {
        show:false,
         orient: 'vertical',
         right: '10%',
         top: '10%',
         itemGap: 30,
         textStyle: {
            color: '#ffffff',
            fontSize: 12,
            rich: {
               name: {
                  width: 80,
                  fontSize: 16,
               },
               value: {
                  width: 20,
                  fontSize: 16,
                  padding: [0, 0, 0, 50]
               },
               percent: {
                  width: 10,
                  fontSize: 16,
               },
            },
         },
         data: resultData,
         formatter: (name) => {
            if (resultData.length) {
               const item = resultData.filter((item) => item.name === name)[0];
               return \`{name|\${name}}{value| \${item.percent}%}{value| \${item.value}km²}\`;
            }
         },
      },
   ],
   tooltip: {
    show:false,
      trigger: 'item',
      formatter(params) {
         let res = '';
         const { marker, name, value } = params;
         if (name !== '') {
            res += \`\${marker}${name}:\${value}Km²\`
         }
         return res;
      }
   },
   grid:{
  
   },
   series: [
      {
         type: 'pie',
         roseType: 'radius',
         radius: ['20%', '60%'],
         center: ['50%', '50%'],
               label: {
          textStyle: {
            fontSize: 16,
            color: "#fff",
          },
          formatter: function(params) {
            console.log(params)
            return \`{a|\${params.name}}\n{b|\${params.value}个(\${params.percent}%)}\`;
          },
          rich: {
            a: {
              color: "rgba(211, 228, 254, 1)",
              fontSize: 16,
              align: "center",
              lineHeight: 25,
              fontWeight: 600,
            }, 
            b: {
              color: "inherit",
              fontSize: 16,
              align: "center",
              lineHeight: 25,
              fontWeight: 600,
            },
          },
        },
         labelLine: {
            show: true,
         },
         itemStyle: {
            normal: {
               color(params) {
                  return colorList[parseInt(params.dataIndex / 2)].color1;
               }
            }
         },
         z: 3,
         data: optionData,
      },
      {
         type: 'pie',
         roseType: 'radius',
         radius: ['20%', '62%'],
         center: ['50%', '50%'],
         label: {
            show: false,
         },
         labelLine: {
            show: false,
         },
         itemStyle: {
            normal: {
               color(params) {
                  return colorList[parseInt(params.dataIndex / 2)].color2;
               }
            }
         },
         z: 2,
         data: optionData,
      }
   ]
}
  myChart.setOption(option);
};
const count = ref(0);
</script>

<style scoped>
.content {
  position: relative;
  background-color: #022b66;
  box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  border: 1px solid rgba(19, 127, 212, 0.6);
}
#huikuan-echarts {
  width: 100%;
  height: 100%;
}
</style>

  
  `;
};
